<template>
  <main>
    <div class="news">
      <div class="tit">
        <ul>
          <li @click="listshow=true" :class="lineshow"><img src="../assets/images/today.png">今日最新</li>
          <li @click="listshow=false" :class="lineshow1"><img src="../assets/images/history.png">历史消息</li>
        </ul>
      </div>
      <div v-show="listshow">
        <NewsList :list="news"></NewsList>
      </div>      
      <div v-show="!listshow">
        <NewsList :list="news"></NewsList>
      </div>
    </div>
      
      <Footer></Footer>
   </main>
</template>

<script>
import { test } from '../api'
import {Tabs, TabPane} from 'mand-mobile'
import NewsList from './common/NewsList'
import Footer from './common/Footer'

export default {
  name: 'tab-bar-demo',
  components: {
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    NewsList,
    Footer
  },
  data() {
    return {
      news:{},
      listshow:true,
      lineshow:"line",
      lineshow1:""

    }
  },
  created() {
    console.log(this.$route);
    test().then(res=>{
      this.news = res.list  
        console.log(res);      
    })
  },
  watch: {
    listshow:function(val,oldval) {
      if(val) {
        this.lineshow = "line"
        this.lineshow1 = ""
      }else {
        this.lineshow = ""
        this.lineshow1 = "line"

      }
    }
  }
}

</script>

<style lang="stylus">
.md-tab-bar-inner
  // background url(../assets/images/today.png) no-repeat
</style>
